// 获取数据
// 获取商品id
// let ids=getUrlParam("id")
// getUrlParam函数在地址栏截取?id  获取到新闻ID
const goodsId = getUrlParam("id");
ajax({
    url: "http://phpclub.org.cn:8080/api/goods/detail",
    data: {
        goodsId: goodsId
    },
    success: function (response) {
        console.log(response);
        // 左侧图片
        let temp = "";
        temp = `<img src="response.data.goodsName">`
    //     document.querySelector(".box").innerHTML = `
    //     <div class="middleBox">
    //     <img src="${response.data.goodsThumb}" width="400" height="400">
    //     <div class="shadow"></div>
    // </div>
    // <div class="smallBox">
    //     <img class="active" src="${response.data.goodsThumb}">
    //     <img src="${response.data.goodsThumb}" alt="">
    // </div>
    // <div class="bigBox"></div>
    //     `
        document.querySelector(".middleBox_img").innerHTML=`<img src="${response.data.goodsThumb}" width="400" height="400">`
        document.querySelector(".smallBox").innerHTML=`<img class="active" src="${response.data.goodsThumb}">
        <img src="${response.data.goodsThumb}" alt="">`
        document.querySelector(".bigBox").style.backgroundImage=`url(${response.data.goodsThumb})`
        let mainImg = document.querySelector(".mainImg");
        console.log(response.data.goodsThumb);

        // 右侧信息
        document.querySelector(".goodsName").innerHTML = response.data.goodsName;
        document.querySelector(".goodsBody").innerHTML = response.data.goodsBody;
        document.querySelector(".marketPrice").innerHTML = response.data.marketPrice;
        document.querySelector(".shopPrice").innerHTML = response.data.shopPrice;
    }
})






















// 获取常用对象
const boxDom = document.querySelector('.box');
const middleBoxDom = document.querySelector('.middleBox');
const smallBoxImgsDom = document.querySelectorAll('.smallBox>img');
const bigBoxDom = document.querySelector('.bigBox');
const shadowDom = document.querySelector('.shadow');
bigBoxDom.style.backgroundImage=`url(${middleBoxDom.firstElementChild.src})`
console.log(middleBoxDom);
// 2.实现点击小图切换中图，同时修改大图
smallBoxImgsDom.forEach(item => {
    // 每一个小图片绑定点击事件
    item.onclick = function () {
        // 实现被点击的存在红色边框效果
        smallBoxImgsDom.forEach(dom => dom.className = "")
        this.className = "active";
        //   实现修改中图
        middleBoxDom.querySelector('img').src = this.src;
        // 修改大图的背景图片
        bigBoxDom.style.backgroundImage = `url(${this.src})`;
    }
})
middleBoxDom.onclick = function () {
    console.log(123);
}
// 鼠标滑入事件
middleBoxDom.onmouseover = function () {
    // 显示遮罩
    shadowDom.style.display = "block";
    // 鼠标滑入后移动开始生效
    middleBoxDom.onmousemove = function (event) {
        // console.log(event);
        // offsetX/Y 获取坐标点相对于元素的位置,在移动过程中 事件源可能是img标签也可能是遮罩 导致所取出来的xy值错误的，最终导致抖动
        let x = event.clientX;
        let y = event.clientY;
        // 获取遮罩的宽高的一半,让遮罩层在鼠标中间
        let shadowWidthHalf = shadowDom.clientWidth / 2;
        let shadowHeightHalf = shadowDom.clientHeight / 2;
        // 限制x,y的坐标点
        // 如果获取到x的坐标点比 box左侧距离+遮罩一般 还要小 就固定在左侧
        if (x < boxDom.offsetLeft + shadowWidthHalf) {
            x = boxDom.offsetLeft + shadowWidthHalf
        }
        // 如果x坐标 值大于 BOX距离左侧的距离+box的宽度-遮罩的一半
        if (x > boxDom.offsetLeft - shadowWidthHalf + boxDom.clientWidth) {
            x = boxDom.offsetLeft - shadowWidthHalf + boxDom.clientWidth;
        }
        // y轴和x同理。
        if (y < boxDom.offsetTop + shadowHeightHalf) {
            y = boxDom.offsetTop + shadowHeightHalf;
        }
        if (y > boxDom.offsetTop - shadowHeightHalf + middleBoxDom.clientHeight) {
            y = boxDom.offsetTop - shadowHeightHalf + middleBoxDom.clientHeight;
        }
        // 由于遮罩定位是按照middleBox进行计算的 xy 坐标点是以浏览器左上角计算。所以需要减掉整个box盒子水平与垂直的距离 offsetLeft offsetTop获取到相对于上级元素的定位偏移量
        shadowDom.style.left = x - boxDom.offsetLeft - shadowWidthHalf + "px";
        shadowDom.style.top = y - boxDom.offsetTop - shadowHeightHalf + "px";
        // 中图的移动距离/大图的移动距离=中兔的最大移动距离/大图的最大移动距离
        //    计算遮罩与中图的百分比
        // 百分比 = 遮罩层的定位偏移量/中图的尺寸

        let percentX = shadowDom.offsetLeft / middleBoxDom.clientWidth;
        let percentY = shadowDom.offsetTop / middleBoxDom.clientHeight;
        // console.log(percentX);
        // 计算大图的完整尺寸
        let bigBoxImgSize = getStyle(bigBoxDom, "backgroundSize");
        // 提取出背景图片的宽高
        let bigBoxImgWidth = parseInt(bigBoxImgSize.split(" ")[0]);
        let bigBoxImgHeight = parseInt(bigBoxImgSize.split(" ")[1]);
        // console.log(bigBoxImgWidth, bigBoxImgHeight);
        let xMove = bigBoxImgWidth * percentX;//大图水平移动距离
        let yMove = bigBoxImgHeight * percentY;//大图垂直移动距离
        // 设置大图背景图片position，负数是因为大图的移动和遮罩层的移动是相反的
        bigBoxDom.style.backgroundPosition = -xMove + "px -" + yMove + "px"
        // 显示大图
        bigBoxDom.style.display = "block";
    }
}
// 4、鼠标划出
middleBoxDom.onmouseout = function () {
    // 隐藏遮罩
    shadowDom.style.display = 'none';
    // 隐藏大图
    bigBoxDom.style.display = 'none';
    // 设置移动事件解绑
    middleBoxDom.onmousemove = null;
}
/**
 * 获取标签指定的的样式
 * @param {Document} elem 需要获取样式的元素的dom对象
 * @param {String} attr 获取样式的名称
 * @returns String
 */
function getStyle(elem, attr) {
    if (window.getComputedStyle) {
        // 表示window下存在getComputedStyle属性 说明绝对是IE高版本
        return window.getComputedStyle(elem)[attr];
    }
    // 代码走到这里绝对可以证明是IE低版本
    return elem.currentStyle[attr];
}


    // 上面是放大镜


